<template>
  <div class="login">
    <div class="img">
      <img
        src="https://account.bol.wo.cn//curesource/upload/2022/08/19/a82e2b41ed977201599f3a7f39560349.png"
        alt=""
      />
    </div>
    <input type="text" v-model="zh" placeholder="请输入帐号" />
    <div class="yzmbox">
      <input type="text" v-model="yzm" placeholder="请输入密码" />
      <button @click="fsyzm" class="yzm" :disabled="yanzhenma">
        {{ fasong }}
      </button>
    </div>
    <button
      @click="login()"
      :disabled="!check || yzm.length < 5"
      :class="[!check || yzm.length < 5 ? 'active' : '']"
    >
      登录
    </button>
    <!-- <button @click="zhuce">注册</button> -->
    <div class="shenming">
      <input type="checkbox" :checked="check" @change="check = !check" />
      我已阅读并同意
      <span>《用户隐私政策》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //帐号密码
      zh: "18804786208",
      yzm: "",
      // zh: "18804786208",
      // mm: "123456",
      check: false,
      inplenth: false,
      yanzhenma: false,
      fasong: "发送验证码",
    };
  },
  methods: {
    login() {
      //验证验证码
      axios
        .post("http://121.89.205.189:3000/api/user/docheckcode", {
          tel: this.zh,
          telcode: this.yzm,
        })
        .then((res) => {
          if (res.data.code == 200) {
            axios
              .post("http://121.89.205.189:3000/api/user/dofinishregister", {
                tel: this.zh,
                password: "",
              })
              .then((res) => {
                if (res.data.code == 200) {
                  axios
                    .post("http://121.89.205.189:3000/api/user/login", {
                      loginname: this.zh,
                      password: "",
                    })
                    .then((res) => {
                      sessionStorage.setItem("token", res.data.data.token);
                      sessionStorage.setItem("userid", res.data.data.userid);
                      this.$router.push({ name: "shouye" });
                      this.$bus.$emit("chai", {
                        name: res.data.data.userid,
                      });
                    });
                }
              });
          }
        });
    },
    //发送验证码
    fsyzm() {
      axios
        .post("http://121.89.205.189:3000/api/user/dosendmsgcode", {
          tel: this.zh,
        })
        .then((res) => {
          console.log(res.data);
          this.yanzhenma = true;
          let index = 5;
          let time = setInterval(() => {
            index--;
            this.fasong = `${index}秒后重新发送`;
            if (index == 0) {
              this.yanzhenma = false;
              this.fasong = "发送验证码";
              clearInterval(time);
            }
          }, 1000);
        });
    },
  },
  computed: {
    active() {},
  },
  mounted() {
    this.$emit("fanhui", null);
  },
};
</script>

<style lang="less" scoped>
.login {
  height: 5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;

  > input {
    width: 3rem;
    height: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin: 10px 0;
    padding-left: 0.2rem;
  }
  > button {
    width: 3rem;
    height: 0.5rem;
    border: 0;
    background: #fac86c;
    color: #fff;
    border-radius: 50px;
  }
  > .shenming {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 0.55rem;
    > span {
      color: #4ea4fb;
    }
  }
}
.yzmbox {
  position: relative;
  > button {
    width: 3rem;
    height: 0.5rem;
    border: 0;
    background: #fac86c;
    color: #fff;
    border-radius: 50px;
  }
  .yzm {
    position: absolute;
    width: 1rem;
    height: 0.4rem;
    top: 21.5%;
    left: 67%;
  }
  > input {
    width: 3rem;
    height: 0.5rem;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50px;
    margin: 10px 0;
    padding-left: 0.2rem;
  }
}

.active {
  background: #f5e4c5 !important;
}
</style>